<script setup lang="ts">
  import { DateTimeConfig, DateTimeType } from '../../../hooks/types'
  import CustomInput from '../../component-list/CustomInput.vue'
  import CustomSingleSelect from '../../component-list/CustomSingleSelect.vue'

  defineOptions({
    name: 'OrderCustomFormDatetimeSetting',
  })

  const emits = defineEmits<{
    (e: 'change'): void
  }>()

  // 绑定的值
  const value = defineModel<DateTimeConfig>('modelValue', { required: true })

  // 日期事件类型下拉选项
  const dateTimeTypeOptions: Array<{ label: string; value: DateTimeType }> = [
    { label: '日期', value: 'date' },
    { label: '日期时间', value: 'date-time' },
    { label: '时间', value: 'time' },
    { label: '时间范围', value: 'time-range' },
  ]
</script>

<template>
  <div class="order-custom-form-datetiem-setting">
    <div class="setting-item date-time-type">
      <div class="label">类型</div>
      <div class="value">
        <custom-single-select
          v-model="value.dateTimeType"
          :options="dateTimeTypeOptions"
          placeholder="请选择类型"
          @change="emits('change')"
        />
      </div>
    </div>

    <div class="setting-item date-time-placeholder">
      <div class="label">提示</div>
      <div class="value">
        <custom-input
          v-model="value.placeholder"
          placeholder="请输入提示"
          @input="emits('change')"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .order-custom-form-datetiem-setting {
    display: flex;
    flex-direction: column;
    row-gap: 16px;

    .setting-item {
      display: flex;
      flex-direction: column;
      row-gap: 4px;
    }
  }
</style>
